<template>
	<div class="page page-child">
		<div class="page__bd">
			<div class="weui-tab">
				<div class="weui-tab__panel">
					<div class="weui-tab__panel_top">
						<i @click="goBack" class="el-icon-arrow-left return-back"></i>
						<div class="top_title">
							<p>工作日志</p>
						</div>
					</div>
					<div class="weui-tab__panel_bd">
						<van-tabs v-model="active" animated swipeable title-active-color="#62c9f8" color="#62c9f8" title-inactive-color="#333" line-width="5.5rem">
							<van-tab :title="item_title" v-for="(item_title,title_index) in title" :key="title_index">
								<template v-if="title_index===0">
									<div style="height:calc(100vh - 86px);overflow:scroll;background-color: #eee">
										<template v-for="(item,parent) in receiveList">
											<div class="date">{{item.receiveDate}}</div>
											<template v-for="(log,child) in item.data">
												<div class="logBox" :data-parent="parent" :data-child="child">
													<div class="info">
														<div class="avatar">
															<image :src="log.avatarUrl"></image>
														</div>
														<div class="sendDeta">
															<div :class="'sender'+' sender' + log.type">
																{{log.sender}}{{log.type===0?'的日报':(log.type===1?' 的周报':'的月报')}}
															</div>
															<div class="time">
																{{log.time}}
															</div>
														</div>
														<div class="more" :data-parent="parent" :data-child="child" @click="logOperate(parent,child)">
															<div class="icon iconfont icon-more"></div>
														</div>
													</div>
													<div class="content">
														<template v-if="log.type===0">
															<div>
																<div class="complete">今日完成工作:</div>{{log.content.todayDone}}</div>
														</template>
														<template v-else-if="log.type===1">
															<div>
																<div class="complete">本周完成工作:</div>{{log.content.weekDone}}</div>
														</template>
														<template v-else>
															<div>
																<div class="complete">本月完成工作:</div>{{log.content.monthDone}}</div>
														</template>
													</div>
												</div>
											</template>
										</template>
									</div>

								</template>
								<template v-if="title_index===1">
									<div style="height:calc(100vh - 86px);overflow:scroll;background-color: #eee">
										<template v-for="(item,parent) in sendList.data">
											<div class="date">{{item.sendDate}}</div>
											<template v-for="(log,child) in item.data">
												<div class="logBox" :data-parent="parent" :data-child="child">
													<div class="info">
														<div class="avatar">
															<image src=""></image>
														</div>
														<div class="sendDeta">
															<div :class="'sender'+' sender' +log.type">
																张三{{log.type===0?'的日报':(log.type===1?' 的周报':'的月报')}}
															</div>
															<div class="time">
																{{log.time}}
															</div>
														</div>
														<div class="more" :data-parent="parent" :data-child="child" @click="logOperate(parent,child)">
															<div class="icon iconfont icon-more"></div>
														</div>
													</div>
													<div class="content">
														<template v-if="log.type===0">
															<div>
																<div class="complete">今日完成工作:</div>{{log.content.todayDone}}</div>
														</template>
														<template v-else-if="log.type===1">
															<div>
																<div class="complete">本周完成工作:</div>{{log.content.weekDone}}</div>
														</template>
														<template v-else>
															<div>
																<div class="complete">本月完成工作:</div>{{log.content.monthDone}}</div>
														</template>
													</div>
												</div>
											</template>
										</template>
									</div>
								</template>
								<template v-if="title_index===2">
									<div style="height:calc(100vh - 86px);overflow:scroll;background-color: #eee">
										<div class="pieWrapper">
											<div class="chartsTitle">
												<div class="selectByDate">
													<PopupPicker :title="selectedDate" confirm-text="确定" :data="selectDateArr" @on-change="selectByDate"></PopupPicker>
													<div class="icon iconfont icon-sanjiao_xia"></div>
												</div>
												<div class="tag">个人日志</div>
											</div>
											<div>
												<ve-pie :data="chartData" :settings="chartSettings" :extend="chartExtend" width="90vw" legend-position="bottom"></ve-pie>
											</div>
										</div>
									</div>
								</template>
							</van-tab>
						</van-tabs>
					</div>
				</div>
			</div>
		</div>
		<AddDrag :list="addList" toolGroupHeight="180px" @addFile="addFun" v-if="active!==2"></AddDrag>
		<van-popup class="operateInner" v-model="moreOperate">
			<div v-if="active===0">
				<div class="divMore" @click="toDivAll">查看张三的所有日志</div>
				<div class="deleteBtn" @click="toDelte">删除</div>
				<div class="cancelBtn" @click="toCancel">取消</div>
			</div>
			<div v-else>
				<div class="withDraw" @click="toWithDrow">撤回(两小时内可撤回)</div>
				<div class="deleteBtn" @click="toDelte">删除</div>
				<div class="cancelBtn" @click="toCancel">取消</div>
			</div>
		</van-popup>
	</div>
</template>
<script>
	import AddDrag from '@/components/publics/AddDrag'
	import { PopupPicker } from 'vux'
	import util from '@/assets/util/util'
	import VePie from 'v-charts/lib/pie.common'
	import "echarts/lib/component/title";
	export default {
		name: "Index",
		data() {
			return {
				active: 0,
				title: [
					"我收到的", "我发出的", "日志统计"
				],
				receiveList: [{
						receiveDate: '2019年10月',
						data: [{
								type: 0,
								sender: '张三',
								avatarUrl: '../../images/avatar/avatar.jpg',
								content: { //内容
									todayDone: '1,完成对资产领用申请列表进行条件搜索，搜索条件有状态和申请时间；2，完成资产领用申请保存为草稿状态,领用资产申请可保存为草稿状态和直接提交审批状态，资产领用申请处于草稿状态时该申请在工作中', //今日完成工作
									todayUndone: '', //今日未完成工作
									todayCoor: '测试', //需协调帮助
								},
								time: '2019/10/3 15:37', //时间
							}, {
								type: 1,
								sender: '张三',
								avatarUrl: '../../images/avatar/avatar.jpg',
								content: { //内容
									weekDone: '1,完成对资产领用申请列表进行条件搜索，搜索条件有状态和申请时间；2，完成资产领用申请保存为草稿状态,领用资产申请可保存为草稿状态和直接提', //本周完成工作
									weekPlan: '测试', //下周工作计划
									weekSummary: '测试', //本周工作总结
									weekCoor: '测试', //需协调帮助
								},
								time: '2019/10/3 15:37', //时间
							},
							{
								type: 2,
								sender: '张三',
								avatarUrl: '../../images/avatar/avatar.jpg',
								content: { //内容
									monthDone: '1,完成对资产领用申请列表进行条件搜索，搜索条件有状态和申请时间；2，完成资', //本周完成工作
									monthPlan: '测试', //下周工作计划
									monthSummary: '测试', //本周工作总结
									monthCoor: '测试', //需协调帮助
								},
								time: '2019/10/3 15:37', //时间
							}
						]

					},
					{
						receiveDate: '2019年9月',
						data: [{
								type: 0,
								sender: '张三',
								avatarUrl: '../../images/avatar/avatar.jpg',
								content: { //内容
									todayDone: '测试',
									todayUndone: '测试',
									todayCoor: '测试',
								},
								time: '2019/10/3 15:37',
							}, {
								type: 1,
								sender: '张三',
								avatarUrl: '../../images/avatar/avatar.jpg',
								content: { //内容
									weekDone: '测试', //本周完成工作
									weekPlan: '测试', //下周工作计划
									weekSummary: '测试', //本周工作总结
									weekCoor: '测试', //需协调帮助
								},
								time: '2019/10/3 15:37', //时间
							},
							{
								type: 2,
								sender: '张三',
								avatarUrl: '../../images/avatar/avatar.jpg',
								content: { //内容
									monthDone: '测试',
									monthPlan: '测试',
									monthSummary: '测试',
									monthCoor: '测试',
								},
								time: '2019/10/3 15:37', //时间
							}
						]
					},
					{
						receiveDate: '2019年8月',
						data: [{
								type: 0,
								sender: '张三',
								avatarUrl: '../../images/avatar/avatar.jpg',
								content: { //内容
									todayDone: '测试',
									todayUndone: '测试',
									todayCoor: '测试',
								},
								time: '2019/10/3 15:37', //时间
							}, {
								type: 1,
								sender: '张三',
								avatarUrl: '../../images/avatar/avatar.jpg',
								content: { //内容
									weekDone: '测试', //本周完成工作
									weekPlan: '测试', //下周工作计划
									weekSummary: '测试', //本周工作总结
									weekCoor: '测试', //需协调帮助
								},
								time: '2019/10/3 15:37', //时间
							},
							{
								type: 2,
								sender: '张三',
								avatarUrl: '../../images/avatar/avatar.jpg',
								content: { //内容
									monthDone: '测试',
									monthPlan: '测试',
									monthSummary: '测试',
									monthCoor: '测试',
								},
								time: '2019/10/3 15:37',
							}
						]
					}
				],
				selectedDate: "2019年",
				sendList: {
					total: {
						data: [{
								year: '2019年',
								daily: 8,
								weekly: 6,
								monthly: 3
							},
							{
								year: '2018年',
								daily: 12,
								weekly: 5,
								monthly: 7
							}
						]
					},
					data: [{
							sendDate: '2019年10月',
							data: [{
									type: 2, //0日报 1周报 2月报
									content: { //内容
										monthDone: '测试', //本月完成工作
										monthPlan: '测试', //下月工作计划
										monthSummary: '测试', //本月工作总结
										monthCoor: '测试', //需协调帮助
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 0, //0日报 1周报 2月报
									content: { //内容
										todayDone: '测试',
										todaySummary: '测试',
										todayCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 1, //0日报 1周报 2月报
									content: { //内容
										weekDone: '测试',
										weekPlan: '测试',
										weekSummary: '测试',
										weekCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 0, //0日报 1周报 2月报
									content: { //内容
										todayDone: '测试',
										todayUndone: '测试',
										todayCoor: '测试',
									},
									time: '2019/10/3 15:37',
								},
								{
									type: 0, //0日报 1周报 2月报
									content: { //内容
										todayDone: '测试',
										todayUndone: '测试',
										todayCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 0, //0日报 1周报 2月报
									content: { //内容
										todayDone: '测试',
										todayUndone: '测试',
										todayCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 0, //0日报 1周报 2月报
									content: { //内容
										todayDone: '测试',
										todayUndone: '测试',
										todayCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 0, //0日报 1周报 2月报
									content: { //内容
										todayDone: '测试',
										todayUndone: '测试',
										todayCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 1, //0日报 1周报 2月报
									content: { //内容
										weekDone: '测试',
										weekPlan: '测试',
										weekSummary: '测试',
										weekCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 1, //0日报 1周报 2月报
									content: { //内容
										weekDone: '测试',
										weekPlan: '测试',
										weekSummary: '测试',
										weekCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 1, //0日报 1周报 2月报
									content: { //内容
										weekDone: '测试',
										weekPlan: '测试',
										weekSummary: '测试',
										weekCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
							]
						},
						{
							sendDate: '2019年9月',
							data: [{
									type: 2, //0日报 1周报 2月报
									content: { //内容
										monthDone: '测试', //本月完成工作
										monthPlan: '测试', //下月工作计划
										monthSummary: '测试', //本月工作总结
										monthCoor: '测试', //需协调帮助
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 0, //0日报 1周报 2月报
									content: { //内容
										todayDone: '测试',
										todayUndone: '测试',
										todayCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 1, //0日报 1周报 2月报
									content: { //内容
										weekDone: '测试',
										weekPlan: '测试',
										weekSummary: '测试',
										weekCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								}
							]
						},
						{
							sendDate: '2019年8月',
							data: [{
									type: 2, //0日报 1周报 2月报
									content: { //内容
										monthDone: '测试', //本月完成工作
										monthPlan: '测试', //下月工作计划
										monthSummary: '测试', //本月工作总结
										monthCoor: '测试', //需协调帮助
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 0, //0日报 1周报 2月报
									content: { //内容
										todayDone: '测试',
										todayUndone: '测试',
										todayCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								},
								{
									type: 1, //0日报 1周报 2月报
									content: { //内容
										weekDone: '测试',
										weekPlan: '测试',
										weekSummary: '测试',
										weekCoor: '测试',
									},
									time: '2019/10/3 15:37', //时间
								}
							]
						}
					]
				},
				addList: [{
					title: '日报',
					imgSrc: '/static/images/work_record/day.png'
				}, {
					title: '周报',
					imgSrc: '/static/images/work_record/week.png'
				}, {
					title: '月报',
					imgSrc: '/static/images/work_record/month.png'
				}],
				selectDateArr: [
					[{
						name: '2019年',
						value: '0'
					}, {
						name: '2018年',
						value: '1'
					}]
				],
				moreOperate: false,
				chartData: {
					columns: ['name', 'value'],
					rows: [{
							name: '日报',
							value: null
						},
						{
							name: '周报',
							value: null
						},
						{
							name: '月报',
							value: null
						}
					]
				},
				chartSettings: {
					labelLine: {
						smooth: 0
					}
				},
				chartExtend: {
					title: {
						text: '日志分类',
						textStyle: {
							fontSize: 14,
							fontWeight: 'lighter'
						}
					},
					series: {
						center: ['50%', '50%'],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					},
					color: ["#62c9f8", "#009688", "#ef7c3a"],
					legend: {
						itemWidth: 12,
						itemHeight: 12,
						icon: 'circle'
					}
				}
			}
		},
		methods: {
			goBack() {
				this.$router.go(-1)
			},
			selectByDate(value) {
				let select = null;
				let idx = null;
				this.selectedDate = this.selectDateArr[0][parseInt(value[0])].name;
				this.sendList.total.data.forEach((item, index) => {
					if(item.year === this.selectedDate) {
						select = item;
						idx = index;
					}
				});
				this.chartData.rows[0].value = this.sendList.total.data[idx].daily;
				this.chartData.rows[1].value = this.sendList.total.data[idx].weekly;
				this.chartData.rows[2].value = this.sendList.total.data[idx].monthly;
			},
			logOperate(pid, id) {
				this.moreOperate = true;
				this.parent = pid;
				this.child = id;
			},
			toDivAll() {
				this.moreOperate = false;
				this.active = 1;
			},
			toDelte() {
				this.$dialog.confirm({
					title: '提示',
					message: '您确定要删除当前日志吗？',
					confirmButtonColor: 'red'
				}).then(() => {
					if(this.active === 0) {
						this.receiveList[this.parent].data.splice(this.child, 1);
					} else {
						this.sendList.data[this.parent].data.splice(this.child, 1);
					}
					this.moreOperate = false;
				}).catch(() => {
					this.moreOperate = false;
				});
			},
			toWithDrow() {
				this.toCancel();
				let currDate = util.formatTime(new Date()).replace(/-/g, '/').substring(0, 16);
				let logDate = this.sendList.data[this.parent].data[this.child].time;
				let logTime = logDate.split(' ')[1];
				let m1 = currDate.split(' ')[0].split('/')[1];
				let m2 = logDate.split(' ')[0].split('/')[1];
				let d1 = currDate.split(' ')[0].split('/')[2];
				let d2 = logDate.split(' ')[0].split('/')[2];
				let h1 = (new Date).getHours();
				let h2 = logTime.split(':')[0];
				if(m1 !== m2 || d1 !== d2) {
					this.$toast({
						message: '发送超过两小时'
					});
					return;
				} else if(parseInt(h2) - parseInt(h1) > 2) {
					this.$toast({
						message: '发送超过两小时'
					});
					return;
				}
				this.$dialog.confirm({
					title: '提示',
					message: '撤回后所有人都无法查看这篇日志',
					confirmButtonColor: 'red'
				}).then(() => {
					this.sendList.splice(this.child, 1);
				}).catch(() => {})
			},
			toCancel() {
				this.moreOperate = false;
			},
			addFun(e) {
				if(parseInt(e.srcElement.dataset.index) === 0) {
					this.$router.push('/RecordAdd?type=0')
				} else if(parseInt(e.srcElement.dataset.index) === 1) {
					this.$router.push('/RecordAdd?type=1')
				} else {
					this.$router.push('/RecordAdd?type=2')
				}
			}
		},
		mounted() {
			this.chartData.rows[0].value = this.sendList.total.data[0].daily;
			this.chartData.rows[1].value = this.sendList.total.data[0].weekly;
			this.chartData.rows[2].value = this.sendList.total.data[0].monthly;
		},
		components: {
			AddDrag,
			PopupPicker,
			VePie
		}
	}
</script>

<style scoped>
	.logBox {
		width: 95%;
		padding: 12px;
		box-sizing: border-box;
		max-height: 185px;
		overflow: hidden;
		background-color: #fff;
		margin: 10px auto;
		border-radius: 7px;
		box-shadow: 4px 4px 3px #ddd;
	}
	
	.logBox:nth-child(2) {
		margin-top: 7px;
	}
	
	.logBox .info {
		height: 60px;
		width: 100%;
	}
	
	.info .avatar {
		display: inline-block;
		height: 100%;
		float: left;
	}
	
	.avatar image {
		width: 37px;
		height: 37px;
		/* border-radius: 50%; */
		margin-top: 10px;
	}
	
	.sendDeta {
		display: inline-block;
		float: left;
		padding: 0 10px;
		height: 60px;
	}
	
	.logBox .content {
		width: 100%;
		height: auto;
		max-height: 105px;
		overflow: hidden;
		text-align: left;
		padding-top: 10px;
		padding-bottom: 5px;
		box-sizing: border-box;
		white-space: normal;
		text-overflow: ellipsis;
	}
	
	.sender {
		font-size: 18px;
		font-weight: normal;
		height: 35px;
		display: table-cell;
		vertical-align: bottom;
		text-align: left;
	}
	
	.sender0 {
		color: #01AAED;
	}
	/* 周报 */
	
	.sender1 {
		color: #FF5722;
	}
	/* 月报 */
	
	.sender2 {
		color: #009688
	}
	
	.time {
		font-size: 14px;
		color: gray;
		height: 25px;
		text-align: left;
	}
	
	.info .more {
		display: inline-block;
		float: right;
		width: 40px;
		height: 40px;
		line-height: 40px;
	}
	
	.info .more .icon {
		font-size: 20px;
		color: gray;
	}
	
	.content div {
		width: 100%;
		text-align: left;
		color: #555;
		font-size: 14px;
		white-space: normal;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	
	.content .complete {
		width: 100%;
		text-align: left;
		font-size: 16px;
		color: #000;
		padding: 2px 0;
	}
	
	.date {
		font-size: 14px;
		text-align: center;
		width: 100%;
		margin-top: 5px;
		color: #333;
	}
	
	.date:nth-child(1) {
		margin-top: 7px;
	}
	
	.selectByDate {
		width: 117px;
		text-align: center;
		height: 32px;
		line-height: 32px;
		margin-left: 50%;
		transform: translateX(-50%);
		font-size: 18px;
		font-weight: bold;
		background-color: rgba(0, 0, 0, 0.08);
		border-radius: 30px;
	}
	
	.selectByDate .icon {
		font-size: 16px;
		color: #aaa;
		display: inline;
	}
	
	.selectByDate::before {
		content: '';
		position: absolute;
		width: 100px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
		left: -130px;
		top: 20px;
	}
	
	.selectByDate::after {
		content: '';
		position: absolute;
		width: 100px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
		right: -130px;
		top: 20px;
	}
	
	.pieWrapper {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		-webkit-text-size-adjust: none;
		-webkit-user-select: none;
		font-size: 17px;
		color: #333;
		font-family: Helvetica, Arial, "Helvetica Neue", "Droid Sans", "Microsoft YaHei", sans-serif;
	}
	
	.chartsTitle {
		width: 100%;
		text-align: center;
		padding: 10px;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
		overflow-x: hidden;
	}
	
	.chartsTitle .tag {
		font-size: 16px;
		color: #aaa;
		padding-top: 5px;
	}
	
	.operateInner {
		padding: 10px;
		border-radius: 10px;
	}
	
	.operateInner div {
		padding: 8px;
		width: 270px;
	}
	
	.operateInner .cancelBtn {
		text-align: right;
		color: #01AAED;
	}
</style>
<style>
	.selectByDate .weui-cell {
		padding: 0;
	}
	
	.selectByDate .vux-cell-primary {
		display: none;
	}
	
	.selectByDate .weui-cell_access .weui-cell__ft {
		display: none;
	}
	
	.selectByDate .vux-cell-box {
		display: inline-block;
	}
	
	.vux-popup-header-right {
		color: #62c9f8 !important;
	}
	
	.van-dialog {
		border-radius: 10px;
	}
	
	.van-tabs--line .van-tabs__wrap {
		border-bottom: 1px solid #eee;
	}
	
	.ve-pie canvas {
		margin-top: 10px !important;
		background-color: #fff;
		padding-top: 10px !important;
		margin-left: 5% !important;
	}
</style>